<template>
    <div class="app-container task-detail">
        <!--顶部步骤-->
        <div class="task-step">
            <template v-for="(item, index) in stepTabs">
                <el-popover v-model="item.show" class="popover-item" width="640" placement="bottom-start"
                            trigger="click">
                    <!--tab-->
                    <button class="step-item" @click="onTabChange(item)" slot="reference">
                        <i class="index">{{ index + 1 }}</i>
                        {{ item.label }}
                        <i class="corner"/>
                    </button>
                    <!--下拉内容-->
                    <action v-loading="popoverLoading" :data="item.info" :step="item.value" :empty-tips="stepTips"
                            :has-permi="hasPermi" @complete="onHandleComplete" @showNeedsData="showNeedsData"/>
                </el-popover>
            </template>
        </div>
        <div class="hjsdks" style="height: 3rem;display: flex;">
            <span style="line-height: 3rem;margin-right: 8px;color: #000;font-weight: 800;">关联合同:</span>
            <span  style="line-height: 3rem;">{{form1.contractName}}</span>
        </div>
        <div class="hjsdks" style="height: 3rem;display: flex;">
            <span style="line-height: 3rem;margin-right: 8px;color: #000;font-weight: 800;">发布者:</span>
            <span  style="line-height: 3rem;">{{detail.createBy}}</span>
        </div>
        <div class="hjsdks" style="height: 3rem;display: flex;">
            <span style="line-height: 3rem;margin-right: 8px;color: #000;font-weight: 800;">最新进度时间:</span>
            <span  style="line-height: 3rem;">{{detail.progressTime}}</span>
        </div>
        <div class="hjsdks" style="height: 3rem;display: flex;">
            <span style="line-height: 3rem;margin-right: 8px;color: #000;font-weight: 800;">计划完成时间:</span>
            <span  style="line-height: 3rem;">{{detail.finishTime}}</span>
        </div>


        <!--切换表格-->
        <el-tabs v-model="detailTab">
            <el-tab-pane v-for="item in taskDetailTableEnum" :label="item.label" :name="item.value">
                <Component :is="item.tableComp" :task-id="taskId" :workshop="clickStep"/>
            </el-tab-pane>
        </el-tabs>
        <el-dialog title="生产所需列表" :visible.sync="dialogVisible" width="30%">
            <el-table v-loading="loading" :data="tableList1">
                <el-table-column label="物料编号" prop="productNo" show-overflow-tooltip />
                <el-table-column label="物料名称" prop="productName" />
                <el-table-column label="规格" prop="productSku" />
                <el-table-column label="数量" prop="productNum" />
                <el-table-column label="颜色" prop="productColour" />
                <el-table-column label="操作" width="100" class-name="small-padding fixed-width">
                    <template slot-scope="{row}">
                        <el-button size="mini" type="text" @click="complement(row)">补数</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
            </span>
        </el-dialog>
        <el-dialog title="输入补数数量" :visible="dialogVisibleNumber" width="30%" :show-close="false">
            <el-input placeholder="请输入补数数量" v-model="dialogVisibleNumberInput"/>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisibleNumberCancel">取 消</el-button>
                <el-button type="primary" @click="dialogVisibleNumberSs">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import {handleEnum, responseEnum, taskDetailTableEnum, taskStepEnum, taskTypeEnum} from "../../../const/const";
import Action from "./action";
import {getActionInfo, getTaskDetail, getTaskStep,getTaskContract,getTaskProductListByTaskId,Complement} from "./api";
import _ from "lodash";

import AllGoods from "./detailTable/allGoods"
import HalfTask from "./detailTable/halfTask"
import Achievement from "./detailTable/achievement"
import Remark from "./detailTable/remark"
export default {
    name: 'taskDetail',
    components: {Action, AllGoods, HalfTask, Achievement, Remark},
    data() {
        return {
            taskId:null,
            productId: null,
            productNum: null,
            dialogVisibleNumberInput: '',
            dialogVisibleNumber: false,
            dialogVisible: false,
            tableList1:[],
            loading:true,
            form1:{
                 contractName:'',
            },
            popoverLoading: false,
            taskDetailTableEnum,
            stepTabs: [],
            detail: null,

            clickStep: null,
            //
            detailTab: '0',

            taskId: null,
            taskCategory: null,

            // 步骤提示
            stepTips: '加载中...',
            // 操作权限
            hasPermi: null,
        }
    },

    created() {
        this.taskId = this.$route.query.taskId;
        this.taskCategory = this.$route.query.taskCategory;
        // 初始化设置步骤标签
        this.initTabs();

        this.getTaskDetail();
          this.getTaskContract()
    },
    methods: {
        dialogVisibleNumberSs() {
             this.loading = true;
            Complement(this.productId, this.dialogVisibleNumberInput, this.productNum,this.taskId).then(res => {
                if (res.code == responseEnum.success) {
                    this.$message.success("操作成功");
                    this.taskId=null
                    this.productId = null
                    this.dialogVisibleNumberInput = ''
                    this.productNum = null
                    this.dialogVisibleNumber = false
                } else {
                    this.$message.error(res.msg);
                }
            }).finally(() => this.loading = false)
        },
        dialogVisibleNumberCancel(){
            this.productId = null
            this.dialogVisibleNumberInput = ''
            this.productNum = null
            this.taskId=null
            this.dialogVisibleNumber = false
        },
        complement(row) {
            this.productId = row.productId
            this.productNum = row.productNum
           this.taskId=row.taskId
            this.dialogVisibleNumber = true
            this.$forceUpdate()
        },
        showNeedsData(e) {
            // console.log(5675,e)
            this.loading = true;
            this.dialogVisible = true
            getTaskProductListByTaskId({
                taskId: e
            }).then(res => {
                if (res.code === responseEnum.success) {
                    this.tableList1 = res.data || [];
                }
            }).finally(() => this.loading = false);
        },
        /** 查询当前任务关联合同*/
        getTaskContract() {
            this.loading = true;
            getTaskContract({taskId:this.taskId}).then(res => {
                if (res.code === responseEnum.success) {
                  this.form1.contractName=res.msg
                }
            }).finally(() => this.loading = false);
        },
        /**
         * 初始化设置步骤标签
         */
        initTabs() {
            const step = _.cloneDeep(taskStepEnum);
            delete step.news;
            if (this.taskCategory === taskTypeEnum.half) {
                delete step.packing;
            }
            if (this.taskCategory === taskTypeEnum.halfPacking) {
                delete step.ball;
                delete step.painting;
                delete step.plating;
            }
            this.stepTabs = Object.keys(step).map(key => {
                return {...step[key], show: false, info: [], refrash: true}
            })
        },

        /**
         * 查询任务详情
         */
        getTaskDetail() {
            getTaskDetail(this.taskId).then(res => {
                if (res.code === responseEnum.success && res.data) {
                    this.detail = res.data;
                }
            })
        },
        /**
         * 切换任务步骤tab
         */
        onTabChange(row) {
            // 权限判断
            const permissions = this.$store.getters.permissions;
            if(!permissions.includes(row.permi) && !permissions.includes('*:*:*')){
                this.stepTips = '抱歉，您无此操作权限！';
                return;
            }
            this.clickStep = row.value;
            if (row.info.length && !row.refrash) {
                return;
            }
            if (Number(row.value) > Number(this.detail.taskStep)) {
                this.stepTips = '等待上一步完成';
                return;
            }
            this.stepTips = '加载中...';
            this.popoverLoading = true;
            this.step = row.value;
            row.refrash = false;
            // 设置操作权限
            this.hasPermi = row.permi;
            getTaskStep(this.taskId, row.value).then(res => {
                if (res.code === responseEnum.success && res.rows && res.rows.length) {
                    row.info = res.rows;
                } else {
                    this.$message.error(res.msg);
                }
            }).finally(() => this.popoverLoading = false)
        },

        /**
         * 任务操作完成回调
         */
        onHandleComplete(handle) {
            let step = Number(this.detail.taskStep);
            handle === handleEnum.taskComplete ? step++ : step--;
            this.detail.taskStep = step;
            this.stepTabs.forEach(item => {
                item.show = false;
                item.refrash = true;
                item.info = [];
            })
        }

    }
}
</script>

<style lang="scss" scoped>
.task-detail {
    .task-step {
        display: flex;
        align-items: center;

        margin-bottom: 50px;

        .popover-item {
            width: 20%;
            flex:1;

            ::v-deep.el-popover__reference-wrapper {
                display: block;
            }

            &:last-child {
                .corner {
                    display: none;
                }
            }
        }

        .step-item {
            position: relative;
            display: flex;
            align-items: center;
            width: 100%;
            height: 50px;
            justify-content: center;
            background: #ecf7ff;
            cursor: pointer;
            border: none;
            outline: none;

            &:focus {
                background: #d4edff;

                .corner {
                    background: #d4edff;
                }
            }

            .corner {
                display: block;
                width: 40px;
                height: 40px;
                z-index: 9;
                position: absolute;
                right: -15px;
                border-top: 5px solid #fff;
                border-right: 5px solid #fff;
                transform: rotate(45deg);
                background: #ecf7ff;
            }

            i.index {
                display: block;
                border: 1px solid #409eff;
                color: #409eff;
                border-radius: 180px;
                font-size: 12px;
                font-style: normal;
                width: 20px;
                height: 20px;
                line-height: 20px;
                text-align: center;
                margin-right: 5px;
            }
        }
    }
}
</style>
